<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
           margin: 0;
           padding: 0;
       }

       body {
           background: url(../src=http___img.jj20.com_up_allimg_1114_113020142315_201130142315-1-1200.jpg&refer=http___img.jj20.webp) no-repeat center top;
       }

       li {
           list-style: none;
       }

       .baidu {
           overflow:hidden;
           margin:100px auto;
           background-color: #fff;
           width: 306px;
           padding-top: 3px;
       }

       .baidu li {
           float: left;
           margin: 0 1px;
           text-align: center;
           cursor: pointer;
       }

       .baidu img {
           width: 100px;
           height: 77.92px;
       }
    </style>
</head>
        <ul class="baidu">
            <li><img src="../src=http___img.jj20.com_up_allimg_1114_113020142315_201130142315-1-1200.jpg&refer=http___img.jj20.webp"></li>
            <li><img src='../src=http___img.jj20.com_up_allimg_4k_s_02_210924233115O14-0-lp.jpg&refer=http___img.jj20.webp'>
            <li><img src='../src=http___img.jj20.com_up_allimg_tp09_21061109241GT3-0-lp.jpg&refer=http___img.jj20.webp'></li>
            </li>
        </ul>
<body>
    <script>
       var imgs = document.querySelector('.baidu').querySelectorAll('img');
       console.log(imgs)
       for( var i = 0 ; i < imgs.length; i++) {
           imgs[i].onclick = function() { 
               document.body.style.backgroundImage = 'url('+ this.src +')'
           }
       }
    </script>
</body>

</html>